<template>
	<view class="mainpadding">
		<!-- <view class="toubox">
			<view class="baosebox mainpadding">
				<view class="flexbetween">
					<view class="flexleft">
						<view class="touxiang margin_right1">
							<image src="../static/image/system/kj.png" mode=""></image>
						</view>
						<view class="">
							<view class="flexleft">
								<view class="qinka margin_right1 sanshier fonweight">李木子</view>
								<view class="qinka margin_right1 strongtext nofonweight">未开通</view>
							</view>
							<view class="qinka margin_top1 strongtext nofonweight">您暂未开通会员</view>
						</view>
					</view>
					<view class="kabtn">会员特权</view>
				</view>
			</view>
		</view> -->
		<view class="dingwei">
			<image class="huiybox" src="../static/image/system/huiybpng.png" mode=""></image>
			<view class="huneir" style="width: 90%;">
				<view class="flexleft">
					<view class="dingwei margin_right2">
						<image class="huiyuantb" :src="userInfo.avatar_text" mode=""></image>
						<!-- <image class="zhuanshi" src="../static/image/system/zs.png" mode=""></image> -->
					</view>
					<view class="">
						<view class="flexleft">
							<view class="margin_right1 xiaoka sanshier fonweight">{{userInfo.nickname}}</view>
							<!-- <view class="xiaoka strongtext fonweight">普通会员</view> -->
						</view>
						<view class="xiaoka strongtext fonweight margin_top">{{userInfo.vip_time_text?userInfo.start_time_text+'生效——'+userInfo.vip_time_text+"到期":''}}</view>
					</view>
				</view>
				<view class="flexbetween" >
					<view class="xiaoka  sanshier fonweight margin_top">{{dataAll.name}}</view>
					<view class="xiaoka sanshier fonweight margin_top">￥{{dataAll.price}}</view>
				</view>
				<!-- <view class="margin_top5 kabtn">会员特权</view> -->
			</view>
		</view>
		<!-- <view class=" flexbetween xiahuaxian margin_top">
			<view class="sanshis flexcenter">
				<view class="">
					<view class="xiaohei bigtext fonweight textcenter">0</view>
					<view class="xiaohei margin_top1 ershiba nofonweight">余额</view>
				</view>
			</view>
			<view class="sanshis flexcenter" @click="tzgywm(1)">
				<view class="">
					<view class="xiaohei bigtext fonweight textcenter">0
						<text class="ershiba xiaohei nofonweight">张</text>
					</view>
					<view class="xiaohei margin_top1 ershiba nofonweight">场地会员卡</view>
				</view>
			</view>
			<view class="sanshis flexcenter" @click="tzgywm(2)">
				<view class="">
					<view class="xiaohei bigtext fonweight textcenter">0
						<text class="ershiba xiaohei nofonweight">张</text>
					</view>
					<view class="xiaohei margin_top1 ershiba nofonweight">俱乐部会员卡</view>
				</view>
			</view>
		</view> -->
		<!-- 会员须知 -->
		<view class="margin_top4">
			<view class="ershiba fonweight xiaohei">会员须知</view>
			<view class="ershil nofonweight xiaohei margin_top2">
				<u-parse :content="dataAll.content"></u-parse>
			</view>
		</view>
		<!-- 固定底部 -->
		<view class="gudingdb mainpadding">
			<view class="huangbtnty " @click="tzhuiyff" v-if="userInfo.vip_time_text">会员续费</view>
			<view class="huangbtnty " @click="tzhuiyff" v-else>开通会员</view>
			<!-- <view class="huangbtnty ">会员充值</view> -->
		</view>
	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")
	export default {
		data() {
			return {
				listid: "",
				dataAll: {},
				userInfo:{}
			}
		},
		onLoad(options) {
			this.listid = options.id
			
		},
		onShow() {
			this.getDetail()
			this.userinfomsg()
		},
		methods: {
			userinfomsg() {
				httpRequest.request('/api/user/index', 'GET', {}).then(res => {
					this.userInfo = res.data
				})
			},
			getDetail() {
				httpRequest.request("/api/ptcard/ptCardDetail", 'GET', {
					id: this.listid
				}, false, false, true).then(res => {
					this.dataAll = res.data
				})
			},
			// 跳转查看会员卡
			tzgywm(i) {
				uni.navigateTo({
					url: '/pages_mypage/changdihyk?id=' + i
				})
			},
			// 跳转会员充值
			tzhuiyff() {
				uni.navigateTo({
					url: '/pages_mypage/huiyuanfufei?type=1&id='+this.listid+"&price="+this.dataAll.price
				})
			}

		}
	}
</script>

<style lang="scss" scoped>
	.weibox {
		padding: 50rpx 22rpx 58rpx;
		background: #F9F9F9;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		opacity: 1;
		border: 2rpx solid #F9F9F9;
	}

	.yixbox {
		padding: 50rpx 22rpx 58rpx;
		background: #FFF7E9;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		opacity: 1;
		border: 2rpx solid #E3C385;
	}

	.zhuanshi {
		width: 40rpx;
		height: 36rpx;
		position: absolute;
		right: 6rpx;
		bottom: 14rpx;
	}

	.huneir {
		position: absolute;
		top: 30rpx;
		left: 30rpx;
	}

	.kabtn {
		padding: 6rpx 20rpx 8rpx;
		background-color: #6A4B18;
		font-size: 24rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #FFE9C5;
		width: 130rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 30rpx;
	}

	.huiyuantb {
		width: 132rpx;
		border-radius: 50%;
		height: 132rpx;
	}

	.huiybox {
		height: 300rpx;
		width: 100%;

	}

	.kabtn {
		padding: 6rpx 20rpx 8rpx;
		background-color: #6A4B18;
		font-size: 24rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #FFE9C5;
		width: 130rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 30rpx;
	}

	.touxiang {
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;

		image {
			border-radius: 50%;
			width: 100%;
			height: 100%;
		}
	}

	.qinka {
		color: #6A5B43;
	}

	.baosebox {
		background-color: rgba(255, 255, 255, 0.36);
		border-radius: 16rpx 16rpx 0 0;
	}

	.toubox {
		padding: 100rpx 30rpx 0;
		background-color: #F4D193;
	}
</style>